<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<input type="" name="">
	<button>查询</button>
	<ul>
		
	</ul>
	<script type="text/javascript">
		/*
			AJAX: 是一种无需链接整个网页的情况下 能够更新部分网页的技术
			也就是JS通过一个网址（url）去加载数据，整个过程用户不可见(无感刷新)
		*/
		let btn = document.querySelector('button')
		let inp = document.querySelector('input')
		btn.onclick = function() {
			//1.创建AJAX对象
			//XMLHttpRequest 用于和服务器之间交换数据的，所有现代浏览器都支持
			let xhr = new XMLHttpRequest()
			console.log(xhr.readyState)

			//2.和服务器建立链接
			//xhr.open(method, Url, async可省略)
			/*
				method: get, post, put, delete
					get: 获取服务器信息(查询)
					post: 发送信息
					put: 更新信息
					delete: 删除信息
			*/
			//key = value
			xhr.open("get",`https://geoapi.qweather.com/v2/city/lookup?location=${inp.value}&key=c494e264764449f7b4f6bf742276d7f9`)
			//3.发送数据
			//get:直接在url后面拼接  ?name=张三&age=18&sex=男
			//post put : 需要加一个请求头，并且请求头的值不同，发送的数据格式也不同，不能拼接到Url上，放到xhr.send()里

			/*
				xhr.setRequestHeader("Content-Type", value)
				"Content-Type": 固定值 传输的数据类型
				value: 1.application/x-www-form-urlencoded
					数据格式: xhr.send('name=张三&age=18&sex=男')

					2.application/json;
					数据格式: obj = {
						name: "张三",
						age: 18,
						sex: "男"
					}
					xhr,send(JSON.stringify(obj))


					3.multipart/form-data 上传文件

			*/

			xhr.send()
			//4.接收数据
			//readystate 改变的时候会触发onreadystatechange事件
			//readystate存了每个阶段的状态变化 0-4
			//0 请求初始化 表示刚创建了AJAX
			//1 表示服务器已连接 open
			//2 表示数据请求已接收 xhr.send
			//3 表示请求处理中
			//4 表示已完成，响应就绪

			let ul = document.querySelector('ul')
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					//拿到返回的数据
					let res = JSON.parse(xhr.responseText)
					console.log(res, res.location[0].id)
					let location = res.location
					ul.innerHTML = ''
					for (let i = 0; i < location.length; i++) {
						let li = `<li>名字${location[i].name}---国家${location[i].country}</li>`
						ul.innerHTML += li
					}

				}
			}
		}

	</script>
</body>
</html>